import { memo } from 'react'
import { CardBoxStyle } from '../style'
import classnames from 'classnames'

interface IProps {
	titleIcon: string
	title: string
	circleName?: string
	number?: string
	numberType?: 'up' | 'down'
	message?: string
}

const CardData = memo((props: IProps) => {
	return (
		<CardBoxStyle>
			<div className="card-title-box">
				<div className={classnames('circle', 'circle-iconfont', props.circleName)}>
					{props.titleIcon}
				</div>
				<div className="card-title">
					<span className="card-title-text">{props.title}</span>
					<div className="card-title-btn">详情</div>
				</div>
			</div>
			<div className="card-number">
				<span className={classnames('icon', 'circle-iconfont', props.numberType)}>
					{props.numberType === 'up' ? '\ue630' : '\ue631'}
				</span>
				<span className="number">{props.number}</span>
			</div>
			<div className="card-info">
				<span className={classnames('info', 'circle-iconfont', props.numberType)}>
					{props.numberType === 'up' ? '\ue62b' : '\ueb6d'}
				</span>
				<span className="message">{props.message}</span>
			</div>
		</CardBoxStyle>
	)
})

export default CardData
